```jsx
import * as dialog from "@zag-js/dialog"
import { Portal } from "solid-js/web"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { createMemo, createUniqueId, Show } from "solid-js"

export default function Page() {
  const service = useMachine(dialog.machine, { id: createUniqueId() })

  const api = createMemo(() => dialog.connect(service, normalizeProps))

  return (
    <>
      <button {...api().getTriggerProps()}>Open Dialog</button>
      <Show when={api().open}>
        <Portal>
          <div {...api().getBackdropProps()} />
          <div {...api().getPositionerProps()}>
            <div {...api().getContentProps()}>
              <h2 {...api().getTitleProps()}>Edit profile</h2>
              <p {...api().getDescriptionProps()}>
                Make changes to your profile here. Click save when you are done.
              </p>
              <button {...api().getCloseTriggerProps()}>X</button>
              <input placeholder="Enter name..." />
              <button>Save Changes</button>
            </div>
          </div>
        </Portal>
      </Show>
    </>
  )
}
```
